<template>
  <div>
    <div class="filter-container">
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreate"
      >
        添加
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        style="margin-left: 10px"
        type="warning"
        icon="el-icon-delete"
        @click="handleDeleteConfirm(currentClickWorkFlowId)"
      >
        删除
      </el-button>
    </div>
    <div
      v-loading="listLoading"
      :style="{ height: dynamicHeight }"
      class="pane-class"
    >
      <split-pane
        :min-percent="splitMinPrecent"
        :default-percent="defaultPercent"
        split="vertical"
        style="border: 1px solid #e8e8e8"
      >
        <template slot="paneL">
          <span v-if="!openSide">
            <section-title
              title=""
              open-class="el-icon-caret-right"
              @changePaneL="changePaneLWith"
            />
          </span>
          <span v-else>
            <section-title
              title="工作流列表"
              open-class="el-icon-caret-left"
              @changePaneL="changePaneLWith"
            />
            <structure-tree
              :data-source="dataSource"
              node-key="oid"
              :default-props="defaultProps"
              :current-node-key="defaultCheckedNode"
              @change="clickNode"
            ></structure-tree>
          </span>
        </template>
        <template slot="paneR" style="width: calc(100vh - 100px)">
          <el-row
            style="border-bottom: 1px solid #e8e8e8"
            type="flex"
            justify="end"
          >
            <el-col>
              <el-select
                v-model="currentWorkFlowOid"
                class="title-select-class"
                style="border: none"
                @change="changInitRap"
              >
                <el-option
                  v-for="item in workFlowOidArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
            <el-col align="right" style="padding: 7px">
              <el-tooltip
                class="item"
                effect="dark"
                content="放大"
                placement="top"
              >
                <el-button
                  size="mini"
                  icon="el-icon-full-screen"
                  @click="magnify"
                ></el-button>
              </el-tooltip>
            </el-col>
          </el-row>

          <!-- <section-title title="流程图" /> -->
          <split-pane
            ref="flowUp"
            :min-percent="10"
            :default-percent="60"
            split="horizontal"
          >
            <template slot="paneL" style="border: 1px solid #e8e8e8">
              <div
                id="rap"
                class="rap-class"
                style="
                   {
                    overflow: auto;
                  }
                "
              ></div>
            </template>
            <template slot="paneR">
              <el-container style="max-height: 100%">
                <el-main style="padding: 0px; overflow: hidden">
                  <div ref="tabcard">
                    <el-tabs
                      v-model="childActiveName"
                      type="border-card"
                      @tab-click="handleClick"
                    >
                      <el-tab-pane name="childFirst">
                        <span slot="label">
                          <svg-icon
                            icon-class="title-base-info"
                            class="tab-pane-label-class"
                          ></svg-icon>
                          基本信息
                        </span>
                        <wf-base-info
                          :work-flow-info="workFlowBaseInfo"
                          class="scrollcard"
                        ></wf-base-info>
                      </el-tab-pane>
                      <el-tab-pane name="childSecond">
                        <span slot="label">
                          <svg-icon
                            icon-class="title-file"
                            class="tab-pane-label-class"
                          ></svg-icon>
                          POMS源文件
                        </span>
                        <file-list
                          :work-flow-oid="currentClickWorkFlowId"
                          class="scrollcard"
                        ></file-list>
                      </el-tab-pane>
                      <el-tab-pane name="childThree">
                        <span slot="label">
                          <svg-icon
                            icon-class="title-activity"
                            class="tab-pane-label-class"
                          ></svg-icon>
                          关联活动
                        </span>
                        <activity-list
                          :work-flow-oid="currentClickWorkFlowId"
                          class="scrollcard"
                        ></activity-list>
                      </el-tab-pane>
                      <el-tab-pane name="childFour">
                        <span slot="label">
                          <svg-icon
                            icon-class="title-project"
                            class="tab-pane-label-class"
                          ></svg-icon>
                          计算算例
                        </span>
                        <calculation-item-list
                          :data-source="wfProject"
                          class="scrollcard"
                        ></calculation-item-list>
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </el-main>
              </el-container>
            </template>
          </split-pane>
        </template>
      </split-pane>
    </div>
    <upload-file-modal
      :dialog-visible="dialogVisible"
      :stage-type="stageType"
      @closeDialog="closeDialog"
    ></upload-file-modal>
  </div>
</template>

<script>
  import splitPane from 'vue-splitpane'
  import sectionTitle from '@/components/SectionTitle'
  import wfBaseInfo from '../components/WfBaseInfo'
  import uploadFileModal from '../components/UploadFileModal'
  import structureTree from '@/components/StructureTree'
  import { getAction } from '@/api/action'
  import { BaseListMixin } from '@/mixins/BaseListMixin'
  import { initRaphael } from '@/utils/PreWebRaphaelTools'
  import CalculationItemList from '../components/CalculationItemList'
  import ActivityList from '../components/ActivityList'
  import FileList from '../components/FileList'

  export default {
    name: 'OptimizePanel',
    components: {
      ActivityList,
      FileList,
      CalculationItemList,
      splitPane,
      sectionTitle,
      wfBaseInfo,
      structureTree,
      uploadFileModal,
    },
    mixins: [BaseListMixin],
    props: {
      stageType: {
        type: Number,
        default: 1,
      },
    },
    data() {
      return {
        splitMinPrecent: 12,
        defaultPercent: 25,
        dataSource: [],
        openSide: true,
        filterText: '',
        // currentCheckNodeData: {},
        listLoading: false,
        defaultCheckedNode: '', // 初始化加载完成设置选中第一个节点
        childActiveName: 'childFirst',
        defaultProps: {
          children: 'children',
          label: 'wfName',
        },
        // title中下拉选项中选中的流程
        currentWorkFlowOid: '',
        workFlowOidArr: [],
        workFlowBaseInfo: {
          // preId: "编号",
          // name: "名称",
          // category: "分类",
          // createUser: "所有者",
          // dataType: "数据类型",
          // organization: "单位",
          // organizationName: "单位名称",
          // modelNum: "型号、产品或课题",
          // speciality: "专业",
          // specialityName: "专业名称",
          // modelNumPart: "部件或子课题",
          // versionNum: "版本号编码",
          // freeNum: "自由编码",
          // createrPreId: "创建用户",
          // createTime6:"6位时间",
        },
        url: {
          list: '/presoftasim/wf/workflow/list',
          detail: '/presoftasim/wf/workflow/detail',
          graph: '/presoftasim/wf/workflow/graphData',
          delete: '/presoftasim/wf/workflow/delete',
          getCalProduct: '/presoftasim/wf/workflow/getCalProduct',
          workFlowOptionsUrl: '/presoftasim/wf/workflow/options',
        },
        disableMixinCreated: true,
        dialogVisible: false,
        currentClickWorkFlowId: '',
        params: {
          oid: undefined,
        }, //请求参数
        wfProject: [], //当前工作流计算项目列表
      }
    },
    computed: {
      dynamicHeight: function () {
        return window.innerHeight > 710
          ? window.innerHeight - 40 - 35 + 'px'
          : '710px'
      },
    },
    watch: {
      workFlowBaseInfo: function (newValue, oldValue) {
        this.getCalproject()
        this.getWorkFlowOptions()
      },
    },
    created() {
      this.loadData().then((resolve) => {
        this.getTarget()
      })
    },
    mounted() {
      // this.getWorkFlowOptions()
    },
    methods: {
      magnify() {
        this.$emit('magnify', this.currentWorkFlowOid)
      },
      // 获取工作流程选项
      getWorkFlowOptions() {
        console.log(this.workFlowBaseInfo)
        // debugger
        getAction(this.url.workFlowOptionsUrl, {
          oid: this.workFlowBaseInfo.oid,
        }).then((res) => {
          // debugger
          if (res.code == 200) {
            this.workFlowOidArr = res.data
            if (res.data.length > 0) {
              this.currentWorkFlowOid = res.data[0].value
            }
          }
        })
      },
      //
      changInitRap: function () {
        let that = this
        getAction(this.url.graph, { workFlowId: this.currentWorkFlowOid }).then(
          (res) => {
            that.initFun([res.data])
          }
        )
      },
      clickNode(data) {
        this.workFlowBaseInfo = data
        this.currentClickWorkFlowId = data.oid
        // 查询绘制流程图的json数据
        let that = this
        getAction(this.url.graph, { workFlowId: data.oid }).then((res) => {
          that.initFun([res.data])
        })
      },
      // tab页面切换事件
      handleClick(tab, event) {},
      handleDeleteConfirm() {
        if (
          this.currentClickWorkFlowId === undefined ||
          this.currentClickWorkFlowId == ''
        ) {
          this.$message({
            type: 'warning',
            message: '请点击选择工作流!',
          })
          return
        }
        let row = { id: this.currentClickWorkFlowId }
        this.handleDelete(row).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
      },
      closeDialog(arg) {
        this.dialogVisible = false
        if (arg) {
          this.loadData()
        }
      },
      initFun(jsonDataArr) {
        initRaphael('rap', jsonDataArr)
      },
      // 模块title展示  最好调整到computed中
      changePaneLWith() {
        this.openSide = !this.openSide
        if (this.openSide) {
          this.splitMinPrecent = 12
          this.defaultPercent = 25
        } else {
          this.splitMinPrecent = (150 / window.innerWidth) * 30
          this.defaultPercent = (150 / window.innerWidth) * 30
        }
      },
      loadData() {
        this.listLoading = true
        let that = this
        return getAction(this.url.list, { stageType: this.stageType }).then(
          (res) => {
            that.dataSource = res.data
            if (that.dataSource.length > 0) {
              // 默认选中树的第一个节点 绘制第一个节点的流程图
              that.defaultCheckedNode = that.dataSource[0].oid
              // initRaphael('rap', []);
              that.clickNode(that.dataSource[0])
            } else {
              initRaphael('rap', [])
            }
            this.listLoading = false
          }
        )
      },

      handleUpload() {
        this.dialogVisible = true
      },
      //  获取当前工作流计算项目列表
      getCalproject: function () {
        this.params.oid = this.workFlowBaseInfo.oid
        getAction(this.url.getCalProduct, this.params)
          .then((response) => {
            if (response.code === 200) {
              this.wfProject = response.data
            } else {
              this.submitFail(response.message)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
      //  获取跳转地址参数
      getTarget: function () {
        if (this.$route.query.target != null) {
          for (let i in this.dataSource) {
            if (this.$route.query.target == this.dataSource[i].oid) {
              this.clickNode(this.dataSource[i])
            }
          }
          this.childActiveName = 'childFour'
        }
      },
    },
  }
</script>

<style>
  .scrollcard {
    height: 178px;
    overflow-y: auto;
  }

  .rap-class {
    overflow: auto;
    height: 100%;
  }

  .el-select {
    width: 280px;
  }

  .title-select-class {
    padding-top: 6px;
  }
  .title-select-class .el-input--small .el-input__inner {
    border: none;
    height: 32px;
    line-height: 32px;
    width: 280px;
  }
</style>
